<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>ajax - KISSY Docs</title>
<link rel="stylesheet" href="../assets/base-min.css" />
<link rel="stylesheet" href="../assets/docs.css" />
</head>
<body class="w866">
<div id="header">
    <a class="logo" href="../index.html"><img src="../assets/logo.png" alt="KISSY" width="138" height="74" /></a>
    <p class="rel-nav">
        <a href="http://github.com/kissyteam/kissy/blob/master/src/ajax/">src files</a>
    </p>
</div>
<div id="content" class="layout grid-s232m0">
    <div class="col-main">
        <div class="main-wrap">
            <div class="section summary">
                <p>ajax 组件对常用 ajax 操作作了基础封装，支持 get/post/jsonp/getScript 等方法，并支持全局事件的绑定</p>
                <p>ajax 组件的命名空间为 KISSY.IO, 常用使用场景可参照 <a href="../../src/ajax/demo.html">demo</a></p>
            </div>

            <div class="section" id="node">
				<!--section{{-->
                <div class="member method">
                    <h4>
                        <a name="method_getScript">getScript</a>
                        <code>HTMLElement <em>getScript</em>( url, success, charset )</code>
                    </h4>
                    <div class="detail">
                        <p>动态加载 js 脚本。</p>
<pre class="example-code"><code>
var S = KISSY;
S.getScript('http://path/to/filename.js', function() {
    alert('filename.js is loaded.');
}, 'utf-8');
</code></pre>
                    </div>
                </div>
				<!--section}}-->
				<!--section{{-->
                <div class="member method">
                    <h4>
                        <a name="method_ajax">ajax</a>
                        <code>XHR|HTMLElement <em>ajax</em>( config )</code>
						config 为 json，其中的成员包括：
                    </h4>
                    <div class="detail">
						<p><b>type | string</b>: 请求类型，可以取值为 GET,POST 等,默认为 GET</p>
						<p><b>url | string</b>: 请求地址</p>
						<p><b>data | string|json</b>: 发起请求需要附加的数据,默认为 null</p>
						<p><b>success | function</b>: 请求成功的回调,回调参数为 data(内容),textStatus(请求状态),xhr(ajax对象)</p>
						<p><b>complete | function</b>: 请求完成的回调，在 success 调用之后触发,参数同 success</p>
						<p><b>error | function</b>: 请求错误时的回调</p>
						<p><b>async | boolean </b>: 是否为异步，默认为 true</p>
						<p><b>jsonp | string </b>: 指定 callback 的别名,请求url会生成 "url?{$jsonp}=jsonp123456"</p>
						<p><b>jsonpCallback | string </b>: 指定 callback 的参数,请求 url 会生成 "url?callback={$jsonpCallback}"</p>
						<p><b>dataType | string </b>: 请求数据类型,将决定返回值 data 的类型,若不指定，返回值data的类型由响应头决定，可取值为 json | jsonp | script | xml | html | text</p>
                        <p>直接使用</p>
<pre class="example-code"><code>
var S = KISSY;
//S.io 可以写为 S.ajax
S.io({
	type: 'POST',
	url: 'interface.php',
	data: null,
	success: function(data, textStatus, xhr) {
		//callback
	},
	dataType:'xml' 
});
</code></pre>
                    </div>
                </div>
				<!--section}}-->
				<!--section{{-->
                <div class="member method">
                    <h4>
                        <a name="method_get">get</a>
						<code>XHR|HTMLElement get(url, data, callback, dataType)</code>
                    </h4>
                    <div class="detail">
						<p><b>url | string</b>: 接口地址</p>
						<p><b>data | string/json</b>: 附加数据，数据将转换成键值对附着在请求的 url 参数串中</p>
						<p><b>callback | function</b> : 回调函数，参数为 data,返回数据,textStatus,文本状态,xhr,ajax 对象</p> 
						<p><b>dataType | string </b>: 可取值为 json,jsonp,script,xml,html,text，其中如果值为json,回调参数data为对象，如果值为xml，回调参数为xml对象,其他情况的回调参数皆为字符串</p>
                        <p>直接使用</p>
<pre class="example-code"><code>
var S = KISSY;
//在不指定 dataType 的情况下,data 的类型和 ajax 响应头类型保持一致
//若为 text/json，data 为 json，若为 text/xml，data 为 xml object，其他情况为 text
S.io.get('interface.php', function(data,textStatus,xhr) {
	S.log(data);
});
</code></pre>
                        <p>指定dataType</p>
<pre class="example-code"><code>
var S = KISSY, IO = S.IO;
//如果 ajax 响应头类型和用户设置不一定的时候，以用户设置为准
IO.get('interface.php', function(data,textStatus,xhr) {
	S.log(typeof data);//'object'
},'json');
</code></pre>
                        <p>附加参数</p>
<pre class="example-code"><code>
var S = KISSY, IO = S.IO;
//传入 json
IO.get('interface.php',{k:'v'}, function(data) {
	S.log(data);
});
//传入 string
IO.get('interface.php','k=v', function(data) {
	S.log(data);
});
</code></pre>
                        <p>变身为jsonp</p>
<pre class="example-code"><code>
var S = KISSY, IO = S.IO;
IO.get('interface.php', function(data) {
	S.log(data);
}, 'jsonp');
</code></pre>
                    </div>
                </div>
				<!--section}}-->
				<!--section{{-->
                <div class="member method">
                    <h4>
                        <a name="method_post">post</a>
						<code>XHR post(url, data, callback, dataType)</code>
                    </h4>
                    <div class="detail">
						<p><b>url | string</b>: 接口地址</p>
						<p><b>data | string/json</b>: 附加数据，数据将转换成键值对附着在请求的 url 参数串中</p>
						<p><b>callback | function</b> : 回调函数，参数为 data,返回数据,textStatus,文本状态,xhr,ajax 对象</p> 
						<p><b>dataType | string </b>: 可取值为 json,jsonp,script,xml,html,text，其中如果值为 json,回调参数 data 为对象，如果值为 xml，回调参数为 xml 对象,其他情况的回调参数皆为字符串</p>
                        <p>直接使用(无参数)</p>
<pre class="example-code"><code>
var S = KISSY, IO = S.IO;
//直接使用
IO.post('interface',function(data){
	S.log(data);
});
</code></pre>
                        <p>带参数提交 post 请求</p>
<pre class="example-code"><code>
var S = KISSY, IO = S.IO;
//带 json 参数
IO.post('interface',{
	k:'v'	
},function(data){
	S.log(data);
});
//带 string 参数
IO.post('interface','k=v',function(data){
	S.log(data);
});
</code></pre>
                    </div>
                </div>
				<!--section}}-->
				<!--section{{-->
                <div class="member method">
                    <h4>
                        <a name="method_jsonp">jsonp</a>
						<code>HTMLElement jsonp(url, data, callback)</code>
                    </h4>
                    <div class="detail">
						<p><b>url | string</b>: 接口地址</p>
						<p><b>data | string/json</b>: 附加数据，数据将转换成键值对附着在请求的 url 参数串中</p>
						<p><b>callback | function</b>: 回调函数</p>
                        <p>常规用法</p>
<pre class="example-code"><code>
var S = KISSY;
//直接使用
S.jsonp('interface.php',function(data){
	S.log(typeof data);
});
</code></pre>
                        <p>自定义callback的参数</p>
<pre class="example-code"><code>
var S = KISSY;
//使用 getScript 模拟
window['customCallback'] = function(data){
	//callback
};
S.getScript('interface.php?callback=customCallback');
</code></pre>
                        <p>指定 callbackName</p>
<pre class="example-code"><code>
var S = KISSY;
//将会发起类似 interface.php?customCallback=jsonp123455 的请求
S.ajax({
	url:'interface.php',
	success: function(data, textStatus, xhr) {
		//callback
	},
	dataType:'jsonp',
	jsonp:'customCallback'
});
</code></pre>
                        <p>带参数提交 jsonp</p>
<pre class="example-code"><code>
var S = KISSY;
//参数可以为 json，也可以为字符串
S.jsonp('interface.php?sleep=0',{
	myparam:'taobao'
},function(data){
	//callback
});
</code></pre>
                    </div>
                </div>
				<!--section}}-->
				<!--section{{-->
                <div class="member method">
                    <h4>
                        <a name="method_on">全局事件绑定</a>
						<code>KISSY.IO.on(type, callback)</code>
                    </h4>
                    <div class="detail">
						<p><b>type | string</b>: 类型，可取值为 start,complete,stop,send</p>
						<p><b>callback | function</b>: 回调函数</p>
                        <p>常规用法</p>
<pre class="example-code"><code>
var S = KISSY,IO = S.IO;
// 全局事件
IO.on('start', function() {
	//ajax 请求开始事件
});
IO.on('complete', function() {
	//ajax 请求结束事件
});
</code></pre>
                    </div>
                </div>
				<!--section}}-->
            </div>

        </div>
    </div>
    <div class="col-sub">
        <div class="sub-wrap">
            <div class="loc"><a href="../index.html">home</a> &rsaquo; ajax :</div>
            <div class="toc">
                <h3>Methods</h3>
                <ul>
                    <li><a href="#method_getScript">getScript</a></li>
                    <li><a href="#method_ajax">ajax</a></li>
                    <li><a href="#method_get">get</a></li>
                    <li><a href="#method_post">post</a></li>
                    <li><a href="#method_jsonp">jsonp</a></li>
                    <li><a href="#method_on">on (全局事件)</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <p class="copyright">&copy; 2009 - 2029 KISSY UI LIBRARY</p>
</div>
</body>
</html>
